<template>
	<view>
		<van-field v-model="title" label="标题" placeholder="请输入" input-align="right" />
		<van-field v-model="taskNo" label="外事任务编号" placeholder="请输入" input-align="right" />
		
		<van-field v-model="dept" label="呈报单位" is-link input-align="right" @click="showTree=true"/>
		<van-action-sheet v-model="showTree"  title="选择呈报单位" cancel-text="确定">
			<view>
				<!-- <input v-model="filterText" placeholder="输入关键字进行过滤" /> -->
				<van-field
					v-model="filterText"
					label=""
					placeholder="输入关键字进行过滤"
					:clearable="true"
				  />
				<ly-tree :tree-data="treeData"
					:props="props"
					ref="tree" 
					node-key="deptId" 
					show-radio 
					checkOnClickNode
					:default-expanded-keys="expandKeys" 
					@check="handleCheck"
					@radio-change="handleRadioChange"
					@node-click="handleNodeClick"
					:filter-node-method="filterNode"
					child-visible-for-filter-node 
				/>
			</view>
		</van-action-sheet>
		
		<van-field v-model="name" label="呈报人" is-link input-align="right" @click="showUser"/>
		<van-action-sheet v-model="showUserInfo"  title="选择呈报人" cancel-text="确定">
			<view class="topsearch">
				<van-field
					v-model="filterText"
					label=""
					placeholder="输入关键字进行过滤"
					:clearable="true"
				  />
			</view>
			<view class="my-container">
				<view class="tree-left">
					<ly-tree :tree-data="treeData"
						:props="props"
						ref="treeOrg" 
						node-key="deptId" 
						:default-expanded-keys="expandKeys" 
						@node-click="handleNodeClick1"
						:filter-node-method="filterNode1"
					/>
				</view>
				<view class="tree-right">
					<van-radio-group v-model="checked">
					  <view v-show="emptyData" class="text-center text-gray padding-top-sm">暂无数据</view>
					  <van-cell-group>
						<van-cell v-for="(item,index) in userArr" title-style="margin-left:15rpx" :title="item.userName" clickable @click="selectUser(item.userId,item.userName)">
						  <template #icon>
							<van-radio :name="item.userId" icon-size="30rpx"/>
						  </template>
						</van-cell>
					  </van-cell-group>
					</van-radio-group>
				</view>
			</view>
		</van-action-sheet>
		
		<van-cell title="起止日期" is-link :value="date" @click="showdateRange = true" />
		<van-calendar v-model="showdateRange" type="range" :min-date="minDate" :max-date="maxDate"
			@confirm="onConfirmDate" color="#1989fa" />
		<van-cell is-link title="公文类型" v-model="docType" @click="showDocType = true" />
		<van-action-sheet round v-model="showDocType" :actions="docTypeList" cancel-text="取消"
			@select="onSelectDocType" />
		<view class="padding-lg">
			<van-button type="info" round block @click="onConfirm">查询</van-button>
		</view>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: {LyTree},
		data() {
			return {
				filterText: '',
				expandKeys: ["0"],//默认展开的节点-对应的deptId的值
				props: function() {
					return {
						// 这里的label就可以使用函数进行自定义的渲染了
						// label(data, node) {
						// 	return '节点' + node.data.personName;
						// },
						label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
						children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
					}
				},
				ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
				treeData: [],
				showTree:false,
				showUserInfo:false,
				title: '',
				name: '',
				//呈报单位用
				dept: '',
				deptId:'',
				userArr:[],//当前单位下的所有人员
				checked:'',//选中的人id
				emptyData:true,//如果没有数据显示暂无数据
				//默认值给001，查呈报人的时候用
				dept2: '',
				deptId2:'',
				date: '',
				showdateRange: false,
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2030, 11, 31),
				docType: '请选择',
				showDocType: false,
				docTypeList: [{
						name: '全部',
						value: 0
					},
					{
						name: '发文（函）',
						value: 1
					},
					{
						name: '呈批件',
						value: 2
					},
					{
						name: '发电',
						value: 3
					},
					{
						name: '分阅单',
						value: 4
					},
					{
						name: '传阅单',
						value: 5
					},
					{
						name: '分办单',
						value: 6
					},
					{
						name: '办理单',
						value: 7
					},
					{
						name: '注办单',
						value: 8
					},
					{
						name: '总局外来文',
						value: 9
					},
					{
						name: '发电抄阅',
						value: 10
					},
				],
				taskNo: '',
				page:'1',
				rows:'10000',

			};
		},
		mounted() {
			// this.$toast('loadTreeData')
			this.getOrgTree()
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			},
			filterText(val) {
				this.$refs.treeOrg.filter(val);
			}
			
		},
		methods: {
			// 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
			handleCheck(obj) {
				// obj: {
				// 	checkedKeys: [9, 5], // 当前选中节点的id数组
				// 	checkedNodes: [{...}, {...}], // 当前选中节点数组
				// 	data: {...}, // 当前节点的数据
				// 	halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
				// 	halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
				// 	node: Node {...} // 当前节点实例
				// }
				
				// console.log('handleCheck', obj);
			},
			
			// 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
			handleRadioChange(obj) {
				// console.log("obj: " + JSON.stringify(obj));
				if(obj.checked == true){//{"checked":false,"node":{"time":1629361630143,"id":3459,"text":null,"checked":false,"indeterminate":false,"data":{"deptId":"002001","deptCode":"002001","deptName":"华北管理局","leaderId":"sysadmin","parentId":"002","allParentId":"0,002,002001","deptLevel":1,"sort":36,"deptType":"org","divisionId":"--","telephone":"11","address":"1","zipCode":"1     ","extend1":"华北管理局","extend2":null,"extend3":null,"extend4":null,"extend5":null,"extend6":"002001","extend7":null,"extend8":null,"extend9":null,"extend10":null,"isValid":"1","createUser":"CAAC_SYSTEM","createTime":"2021-07-27T12:30:00.011+0000","updateUser":null,"updateTime":null,"depth":null}}
					console.log(obj.node.data.deptName)//单位名称
					console.log(obj.node.data.deptId)//单位id
					this.dept = obj.node.data.deptName
					this.deptId = obj.node.data.deptId
				}else{
					this.dept = ''
					this.deptId = ''
				}
				// console.log('handleRadioChange', obj);
			},
			
			handleNodeClick(obj) {
				// console.log('handleNodeClick', JSON.stringify(obj));
				// console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
			},
			//呈报单位查询
			filterNode(value, data) {
				if (!value) return true;
				return data.deptName.indexOf(value) !== -1;
			},
			
			// 选人
			
			handleNodeClick1(obj) {
				console.log(obj.data.deptName)//单位名称
				console.log(obj.data.deptId)//单位id
				this.dept2 = obj.data.deptName
				this.deptId2 = obj.data.deptId
				this.getUserInfo()
				// console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
			},
			//呈报单位查询
			filterNode1(value, data) {
				if (!value) return true;
				return data.deptName.indexOf(value) !== -1;
			},
			
			onSelectDocType(item) {
				this.docType = item.name
				this.showDocType = false
			},
			formatDate(date) {
				return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
			},
			onConfirmDate(date) {
				const [start, end] = date;
				this.showdateRange = false;
				this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
			},
			//查询按钮点击事件
			onConfirm() {
				uni.navigateTo({
					url: "result"
				})
			},
			
			getOrgTree(){
				let _this = this
				this.treeData = this.cache.get('orgTree')
				// uni.getStorage({
				//     key: 'orgTree',
				//     success: function (res) {
				// 		_this.treeData = res.data
				// 		console.log("this.treeData--->: " + JSON.stringify(_this.treeData));
				//     },
				// 	fail: function(e){
										
				// 	}
				// });
			},
			showUser(){
				this.showUserInfo = !this.showUserInfo
				// this.getUserInfo()
			},
			//获取呈报人列表
			getUserInfo(){
				this.userArr=[]//每次获取清空
				this.emptyData = false
				var _this = this
				this.$http({
				  url: this.$httploading.adornUrl(`/caac/platform/org/users/getUserByDeptIdAndParams`),
				  method: 'get',
				  params: this.$http.adornParams({
					  'deptId': this.deptId2,//单位id
					  'page': this.page,
					  'rows': this.rows,
					  'systemKey': 'zhangqi',//固定值
					  'systemFlag': 'yidong'//固定值
				  })
				}).then(({data}) => {
					console.log("data: " + JSON.stringify(data));
					if(data.code==200){
						if(data.data.total>0){
							this.userArr=data.data.rows
						}else{
							this.emptyData = true
						}
					}
				})
			},
			//选中的用户
			selectUser(userId,userName){
				if(userId == this.checked){
					this.checked = ""//如果再次点击，则取消选中
					this.name=""
				}else{
					this.checked = userId
					this.name = userName
				}
				console.log(userId);
			},

		},
	};
</script>

<style scoped>
	.van-cell__title {
		min-width: 50%;

		span {
			display: inline-block;
			text-align: left;
			word-break: break-all;
		}
	}
	
	
	/deep/ .van-field__label {
		color: #323233;
		min-width: 30%;

		span {
			display: inline-block;
			text-align: left;
			word-break: break-all;
		}
	}

	/deep/ .van-field__control {
		font-size: 14px;
		color: #969799;
	}

	.topsearch{
		position: fixed;
		height: 90rpx;
		z-index: 99;
		width: 100%;
		border: 1rpx solid #f0f0f0;
	}
	.my-container{
		margin-top: 90rpx;
		display: flex;
		flex-direction: row;
	}
	.tree-left{
		margin-top: -20rpx;
		width: 65%;
		border-right: 1rpx solid #f0f0f0;
	}
	.tree-right{
		width: 35%;
		position: fixed;
		right: 0rpx;
		max-height: 750rpx;
		overflow: scroll;
	}

</style>
